import React, { PureComponent } from "react";

import {
    View,
    Alert,
    TouchableOpacity,
    Image,
    Text,
    FlatList,
    ScrollView,
    Platform, RefreshControl
} from "react-native";

import TopBar from "../../../../../../components/topbar";

import styles from "./style"
import myIcon from "../../../../../../assets/images/my.png";
import { width } from '../../../../../../util/AdapterUtil'
import closeIcon from "../../../../../../assets/images/close.png";
import zhifubao from "../../../../../../assets/images/zhifubao.png";
import shouji from "../../../../../../assets/images/shouji.png";
import { StackActions } from "react-navigation";
import { DefaultHeader, SmartRefreshControl } from "react-native-smartrefreshlayout";

export default class ShareListScreen extends PureComponent {
    constructor() {
        super();
        this.state= {
            refreshing: false
        }
    }
    componentDidMount() {

    }
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: "white" }}>
                <TopBar navigation={this.props.navigation} title="余额"
                        leftIsVisible={true}></TopBar>
                <ScrollView
                    style={{ flex: 1 }}
                    alwaysBounceVertical={true}
                    refreshControl={
                        Platform.OS == 'ios' ?
                            <RefreshControl
                                refreshing={this.state.refreshing}
                                onRefresh={this._onRefresh.bind(this)}>
                            </RefreshControl>
                            :
                            <SmartRefreshControl
                                ref={ref => this.rc = ref}
                                HeaderComponent={<DefaultHeader />}
                                onRefresh={this._onRefresh.bind(this)}
                            />
                    }>
                    <View style={{alignItems: 'center',backgroundColor:"#fff"}}>
                        <View style={{ marginTop:20,
                            width:"100%",
                            height:width/2 - 80,
                            borderRadius: 3,
                            marginLeft: 0,
                            justifyContent: "center",
                            alignItems: 'center',
                        }}>
                            <Text>余额{"   "}[元]</Text>
                            <Text style={{ fontSize:40,
                                fontWeight:'bold',
                                alignItems: "center",
                                justifyContent: "center",}}>200.00</Text>
                        </View>
                    </View>
                    {this.renderTiXianContent()}
                    {this.renderTiXianHistory()}
                </ScrollView>
            </View>
        )
    }

    renderTiXianContent() {
        return <View style={{backgroundColor:"#fff"}}>
                    <View >
                        <Text style={[styles.fontStyle,{ color: '#222',marginLeft:10,marginBottom: 10}]}>提现方式</Text>
                    </View>
                    <View style={{flexDirection:"row"}}>
                        <TouchableOpacity
                            style={{flex:1,marginTop:5,  borderColor: '#ccc',marginLeft:10,marginRight:10,
                                borderRadius:5,
                                borderWidth: 1,
                                backgroundColor: '#fff'}}
                            onPress={this.onAliPay.bind(this)}>
                            <View style={{width: "100%",flexDirection:"row"}}>
                                <Image
                                    source={zhifubao}
                                    style={{  width: 50,height: 50,marginLeft:20,marginTop: 10,marginBottom: 10,resizeMode: 'contain'}}/>
                                <Text style={{ flex:1,color: '#222',fontSize:15,marginLeft:20,marginTop: 10,marginBottom: 10}}>支付宝提现</Text>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={{flex:1,marginTop:5,  borderColor: '#ccc',marginLeft:10,marginRight:10,
                                borderWidth: 1,
                                borderRadius:5,
                                backgroundColor: '#fff'}}
                            onPress={this.onPhonePay.bind(this)}>
                            <View style={{width: "100%",flexDirection:"row",}}>
                                <Image
                                    source={shouji}
                                    style={{  width: 50,height: 50,marginLeft:20,marginTop: 10,marginBottom: 10,resizeMode: 'contain'}}/>
                                <Text style={{ flex:1,color: '#222',fontSize:15,marginLeft:20,marginTop: 10,marginBottom: 10}}>手机充值</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
    }
    renderTiXianHistory() {
        return <View  style={{flex:1}}>
            <View  style={{zIndex: 1000,backgroundColor:"#fff"}}>
                <Text style={[styles.fontStyle,{color: '#222',marginLeft:10,marginTop: 20,marginBottom: 10}]}>提现记录</Text>
            </View>
            <View style={styles.line} />
            <FlatList
                data={[{id: '1',name: '小明'}, {id: '2',name: '小德'},{id: '3',name: '小发'}]}
                renderItem={this._renderItem}
                keyExtractor={item => item.id}/>
        </View>
    }

    //支付宝提现
    onAliPay() {
        this.props.navigation.navigate('AliPay');
    }
    //手机提现
    onPhonePay() {
        this.props.navigation.dispatch(
            StackActions.push({
                routeName: 'PhonePay',
            })
        );
    }
    _renderItem = ({item}) => (
        <MyListItem
            id={item.id}
            onPressItem={this._onPressItem.bind(this)}
            title={item.name}
        />
    )
    _keyExtractor = (item, index) => item.id;
    _onPressItem (id: string) {

    }
    _onRefresh() {
        setTimeout(() => {
            Platform.OS == 'ios' ? this.setState({ refreshing: false }) : this.rc && this.rc.finishRefresh();
        }, 1000);
    }
    _onLoadMore() {
        return new Promise((r)=>{
            setTimeout(()=>{
                r();
            },1000)
        });
    }
}

class MyListItem extends PureComponent {
    _onPress = () => {
        this.props.onPressItem(this.props.id);
    };

    render() {
        return (
            <View>
                <TouchableOpacity
                    style={{width: "100%"}}
                    onPress={this._onPress.bind(this)}>
                    <View style={{width: "100%",flexDirection:"row", alignItems: "center",
                        justifyContent: "center"}}>

                        <View style={{flex:1,marginTop: 10,marginBottom: 10,marginLeft:20}}>
                            <Text style={{ flex:1,color: '#222',fontSize:16}}>
                                {this.props.title}
                            </Text>
                            <Text style={{flex:1,color:'#ccc',fontSize:12,paddingTop: 5}}>
                                {this.getDateFormat(1543908499245)}
                            </Text>
                        </View>
                        <Text style={[{fontSize:16,color:'#ccc',marginRight:15},this.getObserverColor(2)]}>
                            {this.getObserverText(2)}
                        </Text>
                        <Image
                            source={closeIcon}
                            style={{  width: 18,height: 18,marginRight:20, justifyContent: "center"}}/>
                    </View>
                    <View style={styles.line} />
                </TouchableOpacity>
            </View>
        )
    }

    getObserverColor(isObserver) {
        if (isObserver === 0) {
            //审核通过
            return { color:'#808080'};
        }else if (isObserver === 1) {
            //审核中
            return { color:'#F98141'};
        }else if (isObserver === 2) {
            //审核未通过
            return { color:'#22AC38'};
        }
    }

    getObserverText(isObserver) {
        if (isObserver === 0) {
            //审核通过
            return "审核通过";
        }else if (isObserver === 1) {
            //审核中
            return "审核中";
        }else if (isObserver === 2) {
            //审核未通过
            return "审核未通过";
        }
    }

    getDateFormat(time) {
        var date = new Date(time);
        var year = date.getFullYear().toString();
        var month = (date.getMonth()+1).toString();
        var day = date.getDate().toString();
        var hour =  date.getHours().toString();
        var minute = date.getMinutes().toString();
        return year+'-'+month+'-'+day +' '+hour+':'+minute;
    };
}
